<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">111</div>
    <input type="text" class="myinput" />
    <script>
      //键盘事件: 触发键盘的时候产生的事件
      //keydown keypress keyup
      //keydown 和 keyup表现是一样的:

      //1.keydown: 键盘按下的时候出发事件
      // document.onkeydown = function () {
      //   console.log("键盘按下了");
      // };

      //在元素身上绑定键盘事件没有效果
      // document.querySelector(".box").onkeydown = function () {
      //   console.log("键盘按下了");
      // };

      //在输入框里面绑定键盘事件,键盘事件可以在input框里面进行绑定的
      // document.querySelector(".myinput").onkeydown = function () {
      //   console.log("键盘按下了");
      // };

      //2.keyup: 按键抬起的时候触发事件
      // document.onkeyup = function () {
      //   console.log("键盘抬起了");
      // };

      //3.keypress : 键盘按压的时候执行
      // document.onkeypress = function () {
      //   console.log("键盘按压了");
      // };

      //4.区分按键:
      //方式一: 通过事件对象的keyCode 来区分(不推荐)
      // keydown和keyup都是一样,他们不区分大小写;
      // document.onkeydown = function (e) {
      //   var keycode = e.keyCode; //是按键的ASSCI码的值
      //   console.log(keycode);
      // };

      //keypress的 keyCode是区分大小写的
      // keypress不是所有的按键都支持;
      // document.onkeypress = function (e) {
      //   var keycode = e.keyCode;
      //   console.log(keycode);
      // };

      //方式二: 通过事件对象的key来区分
      document.onkeydown = function (e) {
        var key = e.key;
        // console.log(key);
        if (key === "Enter") {
          console.log("按下了Enter");
        }
      };
    </script>
  </body>
</html>
